<script setup lang="ts">
import { onMounted, reactive, ref, unref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/store/modules/user";

const useStore = useUserStore();
const redirect = ref<any>("/"); // 登录携带的跳转连接
const route = useRoute();
const $router = useRouter();

import { login } from "@/api/login"; //登录方法
const formData = reactive<userLoginType>({
  phone: "",
  code: "",
});
const rules = reactive<FormRules>({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 20, message: "用户名为3-20位数", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 3, max: 20, message: "请输入3-20位密码", trigger: "blur" },
  ],
});
const ruleFormRef = ref<FormInstance>();
const emits = defineEmits(["handleLogin"]);

const submitForm = async (formEl: FormInstance | undefined) => {
  await formEl.validate((valid, fields) => {
    if (!valid) {
      return false;
    }

    login(formData)
      .then((res) => {
        const { data } = res;
        useStore.setToken(data.token);
        useStore.setUser(data);
        $router.push(redirect.value);
      })
      .catch((err) => {
        console.log(err);
      });
  });
};

watch(
  route,
  (routes) => {
    redirect.value = (routes.query && routes.query.redirect) || "/";
  },
  { deep: true } // 深度监听
);
</script>
<template>
  <div class="login-main">
    <div class="login-body">
      <div class="login-body-left">
        <div class="login-content">
          <div class="login-content-title">后台登录</div>
          <el-form
            size="large"
            label-position="top"
            :rules="rules"
            ref="ruleFormRef"
            :model="formData"
          >
            <el-form-item label="账号" prop="phone">
              <el-input size="large" v-model="formData.phone" placeholder="请输入账号" />
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <el-input
                size="large"
                show-password
                v-model="formData.code"
                placeholder="请输入验证码"
              />
            </el-form-item>
            <el-button type="primary" style="width: 100%" @click="submitForm(ruleFormRef)"
              >登录</el-button
            >
            <div class="login-bottom"></div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-main {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--#{$namespace}-bg-color-page);
  background-size: 100% auto;
  background-repeat: repeat;
  background-position: center;
  overflow: hidden;

  &.dark {
    // background-image: url("/status/images/loginbj.jpg");
    .login-body {
      background-color: rgba($color: #222, $alpha: 0.7);
      color: #fff;
    }
    ::v-deep {
      .#{$namespace}-input__wrapper {
        --#{$namespace}-input-bg-color: transparent;
        color: #fff;
      }
      .#{$namespace}-form-item__label {
        color: #fff;
      }
      .#{$namespace}-input__inner {
        color: #fff;
      }
    }
  }
}
.canvasDom {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.login-body {
  width: 500px;
  position: relative;
  z-index: 9;
  border-radius: 12px;
  display: flex;
  background-color: #fff;

  &-left {
    flex: 1;
  }
  &-right {
    padding: 30px;
    width: 300px;
    border-left: 1px solid var(--el-card-border-color);
    text-align: center;
    h3 {
      font-weight: 300;
      font-size: 22px;
      margin-bottom: 10px;
    }
    p {
      margin-bottom: 20px;
    }
  }
}

.login-content {
  width: 100%;

  padding: 60px 40px;

  &-title {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 30px;
    text-align: center;
  }
}
.login-bottom {
  display: flex;
  margin-top: 20px;
  &-left {
    flex: 1;
  }
}
</style>
